<template>
    <div>
      <p>识别结果: {{ transcript }}</p>
      <button @click="handleStartListening" :disabled="listening">
        开始录音
      </button>
      <button @click="handleStopListening" :disabled="!listening">
        停止录音
      </button>
      <button @click="handleClearTranscript">
        清空内容
      </button>
    </div>
  </template>
  
  <script setup lang="ts">
  // import { ref } from 'vue';
  import { useSpeechRecognition } from 'vue-speech';
  
  // 初始化语音识别状态
  const { transcript, listening, start, stop, reset } = useSpeechRecognition({
    continuous: true,
    interimResults: false,
    language: 'zh-CN',
  });
  
  // 定义按钮点击事件处理函数
  const handleStartListening = () => {
    start();
  };
  
  const handleStopListening = () => {
    stop();
  };
  
  const handleClearTranscript = () => {
    reset();
  };
  </script>
  
  <style scoped>
  /* 添加一些样式以美化界面 */
  button {
    margin: 5px;
  }
  </style>